<template>
  <div>
    <el-row>
      <el-card>
        <el-form>
          <el-row>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-form-item label="车型编号">
                  <el-input
                    v-model="formData.id"
                    placeholder="请输入车型编号"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="应载重量">
                  <el-select
                    v-model="formData.allowableLoad"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in yingzhong"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-form-item label="应载体积">
                  <el-select
                    v-model="formData.allowableVolume"
                    placeholder="请选择应载体积"
                  >
                    <el-option
                      v-for="item in yingji"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="车辆类型">
                  <el-input
                    placeholder="请输入车辆类型"
                    v-model="formData.name"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="16">
              <el-button type="primary" @click="submit">搜索</el-button>
              <el-button @click="chongzhi">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-card>
        <el-col>
          <el-button type="primary" size="medium">新增车型</el-button>
        </el-col>
        <el-col>
          <el-table
            border
            stripe
            style="text-align: center; margin-top: 15px; margin-bottom: 20px"
            :data="tableDate"
          >
            <el-table-column
              label="序号"
              type="index"
              width="50"
            ></el-table-column>
            <el-table-column prop="id" label="车型编号"></el-table-column>
            <el-table-column prop="name" label="车辆类型"></el-table-column>
            <el-table-column prop="num" label="车型数量"></el-table-column>
            <el-table-column
              prop="allowableLoad"
              label="应载重量（吨）"
            ></el-table-column>
            <el-table-column
              width="160"
              prop="allowableVolume"
              label="应载体积（立方米）"
            ></el-table-column>
            <el-table-column
              prop="measureLong"
              label="长（米）"
            ></el-table-column>
            <el-table-column
              prop="measureWidth"
              label="宽（米）"
            ></el-table-column>
            <el-table-column
              prop="measureHigh"
              label="高（米）"
            ></el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <el-button
                  style="color: rgb(65, 158, 255)"
                  type="text"
                  @click="bianEdit(row)"
                  >编辑</el-button
                >
                <span style="color: #ccc; margin: 3px">|</span>
                <el-button type="text" @click="delRow(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin-bottom: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.pages.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="this.pages.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="+counts"
          >
          </el-pagination>
        </el-col>
      </el-card>
    </el-row>
    <el-dialog title="编辑车型" :visible="isDone">
      <el-form :model="editDate" style="margin-left: 80px">
        <el-form-item prop="name" label="车辆类型">
          <el-input v-model="editDate.name" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item prop="allowableLoad" label="应载重量">
          <el-input
            v-model="editDate.allowableLoad"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item prop="allowableVolume" label="应载体积">
          <el-input
            v-model="editDate.allowableVolume"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item prop="measureLong" label="长">
          <el-input
            v-model="editDate.measureLong"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item prop="measureWidth" label="宽">
          <el-input
            v-model="editDate.measureWidth"
            style="width: 80%"
          ></el-input>
        </el-form-item>
        <el-form-item prop="measureHigh" label="高">
          <el-input
            v-model="editDate.measureHigh"
            style="width: 80%"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-button style="margin-right: 20px" @click="clone">取消</el-button>
        <el-button type="primary" @click="submitAdd">确定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getCheDangDateApi, getCheListApi } from "@/api/cheAdmin";

export default {
  data() {
    return {
      counts: 0,
      tableDate: [],
      isDone: false,
      editDate: {
        name: "",
        allowableLoad: "",
        allowableVolume: "",
        measureLong: "",
        measureWidth: "",
        measureHigh: "",
      },
      pages: {
        page: 1,
        pageSize: 10,
      },
      yingzhong: [
        {
          value: "RANGE_LEVEL_1",
          label: "<1.8（吨）",
        },
        {
          value: "RANGE_LEVEL_2",
          label: "1.8-6（吨）",
        },
        {
          value: "RANGE_LEVEL_3",
          label: "6-14（吨）",
        },
        {
          value: "RANGE_LEVEL_4",
          label: "14-30（吨）",
        },
        {
          value: "RANGE_LEVEL_5",
          label: "30-50（吨）",
        },
        {
          value: "RANGE_LEVEL_6",
          label: "50-100（吨）",
        },
        {
          value: "RANGE_LEVEL_7",
          label: "100>（吨）",
        },
      ],
      yingji: [
        {
          value: "RANGE_LEVEL_1",
          label: "<3（m³）",
        },
        {
          value: "RANGE_LEVEL_2",
          label: "3-5（m³）",
        },
        {
          value: "RANGE_LEVEL_3",
          label: "5-10（m³）",
        },
        {
          value: "RANGE_LEVEL_4",
          label: "10-15（m³）",
        },
        {
          value: "RANGE_LEVEL_5",
          label: "15-30（m³）",
        },
        {
          value: "RANGE_LEVEL_6",
          label: "30-50（m³）",
        },
        {
          value: "RANGE_LEVEL_7",
          label: "50-80（m³）",
        },
        {
          value: "RANGE_LEVEL_8",
          label: "80-150（m³）",
        },
        {
          value: "RANGE_LEVEL_9",
          label: "150>（m³）",
        },
      ],
      formData: {
        allowableVolume: "", //应载体积
        allowableLoad: "", //应载重量
        id: "", //车型编号
        name: "", //车辆类型
      },
    };
  },
  created() {
    this.getCheListInfo();
  },
  methods: {
    submitAdd() {
      console.log(this.editDate);
    },
    clone() {
      this.isDone = false;
      this.editDate = {
        name: "",
        allowableLoad: "",
        allowableVolume: "",
        measureLong: "",
        measureWidth: "",
        measureHigh: "",
      };
    },
    chongzhi() {
      this.formData = {
        allowableVolume: "", //应载体积
        allowableLoad: "", //应载重量
        id: "", //车型编号
        name: "", //车辆类型
      };
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pages.pageSize = val;
      this.getCheListInfo();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    async bianEdit(row) {
      this.isDone = true;
      console.log(row.id);
      const res = await getCheDangDateApi(row.id);
      this.editDate = res.data.data;
      console.log(res.data.data);
    },
    delRow() {},
    async submit() {
      console.log(this.formData);
      const paramsDate = { ...this.formData, ...this.pages };
      console.log(paramsDate);
      const res = await getCheListApi(paramsDate);
      console.log(res);
      this.counts = res.data.data.counts;
      this.tableDate = res.data.data.items;
    },
    async getCheListInfo() {
      console.log(this.pages);
      const res = await getCheListApi(this.pages);
      console.log(res.data.data);
      this.counts = res.data.data.counts;
      this.tableDate = res.data.data.items;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-row {
  //height: 200px;
  .el-input {
    width: 300px;
  }
  .el-pagination {
    text-align: center;
  }
}
.el-dialog {
  .el-form-item {
    ::v-deep .el-form-item__label {
      width: 68px;
    }
  }
}
</style>
